<template>
	<view>
		<!-- <view class="input-control-wrapper">
			<input type="text" :value="value" v-on:input="onInput" />
			<view class="button-group">
				<button type="primary" @click="addItem">添加</button>
				<button type="warn" @click="removItem">删除</button>
			</view>
			
		</view>
		
		<view class="uni-list">
			<view class="uni-list-cell" v-for="(item,index) in list" :key="index">
				<view class="uni-list-cell-navigate uni-navigate-right">
					{{item}}
				</view>
			</view>
		</view> -->
		<todoList 
			:todos="list" 
			@remove="removeTodo"
			@add="addItem"
		/>
	</view>
</template>

<script>
	import todoList from '@/components/todo-list.vue';
	
	let nextTodoId = 1;
	export default {
		components:{todoList},
		data() {
			return {
				list:[	{
					id: nextTodoId++,
					text: 'Learn Vue'
				},
				{
					id: nextTodoId++,
					text: 'Learn about single-file components'
				},
				{
					id: nextTodoId++,
					text: 'Fall in love'
				}]
			};
		},
		methods:{
			addItem(newTodoText){
				console.log(newTodoText);
				if (newTodoText) {
					this.list.push({id:nextTodoId++,text:newTodoText});
				}
			},
			removeTodo(removeId){
				console.log(removeId);
				this.list = this.list.filter(todo => {
					return todo.id !== removeId;
				})
			},
			onInput(e){
				this.value = e.target.value;
			}
		}
	}
</script>

<style lang="scss">
	.input-control-wrapper{
		display: flex;
		flex-direction: column;
		input{
			border: 1px solid #ccc;
			height: 60upx;
		}
		.button-group{
			display: flex;
		}
	}
</style>
